<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom进阶</title>
	</head>
	<body>
		<p>1Dom类型</p>
		document.getElementById("xxx").nodeType==1;表示元素节点类型
		<span>2Document类型</span>
		<p>Document类型表示文档或文档的根节点，而这个节点是隐藏的，没有具体的元素标签</p>
		<span>3Element类型</span>
		<p>Element类型用于表现HTML中的元素节点。在DOM基础那章，我们已经可以对元素节点进行查找创建等操作
		元素节点的nodeType 为1，nodeName为元素的标签名。
		元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型。
		例如： HTML   >>>HTMLHtmlElement    ;DIV>>>>HTMLDivElement   等
		</p>
		<span>4Text类型</span>
		<p>Text类型用于表现文本节点类型，文本节点类型不包含HTML，或包含转义后的HTML。文本节点的nodeType为3</p>
		<span>5Comment类型</span>
		<p>Comment 类型表示文档中的注释。nodeType是8，nodeName是#document,nodeValue是注释内容</p>
		<span>6  Attr类型</span>	
		<p>Attr类型表示文档元素中的属性。nodeType为2，nodeName为属性名，nodeValue为属性值。</p>
	<div id="box"><!--我是注释-->测试123</div>
	</body>
	<script>
		window.onload =function(){
			//alert(Node);//  IE不支持，火狐和谷歌不一致
		/*	alert(Node.ELEMENT_NODE);// 1  表示元素节点的属性值
			alert(Node.TEXT_NODE);//3  表示文本节点的属性值
			alert(Node.ATTRIBUTE_NODE);//2 表示属性节点的属性值
			alert(Node.CDATA_SECTION_NODE);//4 表示CDATA属性的属性值 
			alert(Node.ENTITY_REFERENCE_NODE);//5 表示实体参考的属性值
			alert(Node.ENTITY_NODE);//6 表示实体的属性值
			alert(Node.PROCESSING_INSTRUCTION_NODE);//7 表示处理指令的属性值
			alert(Node.COMMENT_NODE);//8 表示注释
			alert(Node.DOCUMENT_NODE);//9 文档根
			alert(Node.DOCUMENT_TYPE_NODE);;//10 doctype
			alert(Node.DOCUMENT_FRAGMENT_NODE);//11 文档片段
			alert(Node.NOTATION_NODE);//12 符号
			
			//兼容IE
			if(typeof Node=='undefined'){
				//创建一个全局的Node
				window.Node={
					ELEMENT_NODE:1,
					ATTRIBUTE_NODE:2,
					TEXT_NODE:3,
					CDATA_SECTION_NODE:4
					//省略。。。。
					
				};
			}
			*/
			
	/*		alert(document.nodeType);//9 文档根
			alert(document.nodeValue);//null
			alert(document.nodeName);// #document
			
			alert(document.childNodes[0]);//[object DocumentType] ,IE理解为注释
			alert(document.childNodes[0].nodeType);//10,ie为8
			alert(document.childNodes[0].nodeName);//html,ie为#document,火狐旧版本为HTML
			*/
			
	/*		alert(document.childNodes[1]);//[object HTMLHtmlElement]
			alert(document.documentElement);//[object HTMLHtmlElement]
			
			alert(document.body.nodeName);//获取Body
			
			alert(document.doctype);//[object DocumentType]  ie8以下 为null
			
			alert(document.title);//获取title
			document.title ='document的标题赋值';
			alert(document.URL);//获取url路径
			alert(document.domain);//获取服务器域名
			alert(document.referrer);//获取上一个url,服务器端  
			
			
			alert(document.images);//获取文档中<img>元素集合
			alert(document.anchors);//获取文档中带<name>属性的<a>元素集合
			alert(document.links);//获取文档中带href属性的<a>元素集合
			alert(document.forms);//获取文档中<form>元素的集合
			alert(document.applets)//获取文档中<applet>元素集合，已废弃
			*/
			
			var box = document.getElementById("box");
			alert(box.childNodes.length);
			
			//合并节点
		  /*var text1 =document.createTextNode('Mr.');
			var text2 = document.createTextNode('lee');
			box.appendChild(text1);
			box.appendChild(text2);
			alert(box.childNodes.length);
			box.normalize();//合并同一级别的文本节点
			alert(box.childNodes.length);*/
			//分离节点
		/*	box.childNodes[0].splitText(2);//把前两个字符分离成新的节点
			alert(box.childNodes[0].nodeValue);//测试（123为第二个）*/
	/*		
			//删除节点
		    box.childNodes[0].deleteData(0,3);//23     删除前三个节点
			//插入节点
			box.childNodes[0].insertData(0,'Hello');//从第几个位置插入元素
			//替换
			box.childNodes[0].replaceData(0,2,'gg');//从低0个到第二个替换
			//选取  substringData会直接输出
			alert(box.childNodes[0].substringData(0,2))//*/
			
			alert(box.firstChild);//[object Comment]
			alert(box.firstChild.nodeType);//8
			alert(box.firstChild.nodeValue);//我是注释
			//在ie中注释节点使用！当作元素来访问
		   //var c = document.getElementsByTagName('!')
			//alert(Comment.length);
		}
		
	</script>
</html>
